<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<html lang="en">
<head>
	<head th:include="header::header"></head>
	<title>普惠商城-商城首页-注册页面</title>
	<link rel="stylesheet" th:href="@{/css/login.css}"/>
	<style>
	   .ret_prompt{
			margin-top: 39px;
			width: 250px;
			height: 18px;
			display: block;
			line-height: 18px;
			font-size: 14px;
			color: #ce5242;
			left: 27px;
			bottom: 89px;
			position: absolute;
		}
		.login_box{
			position:relative;
		}
		.get_yzm{
			padding-left: 0px;
			text-align: center;
		}
		.img_pointer{
			cursor: pointer;
		}
		.pass_pos{
			top:110px;
			left:28px;
			position: absolute;
			font-size: 12px;
			width:auto;
			z-index:999;
			color:#bababa;
			display: none;
		}
		.user_pos{
			position: absolute;
			top:35px;
			left:28px;
			font-size: 12px;
			width:auto;
			z-index:999;
			color:#bababa;
			display: none;
		}
		
	</style>
</head>
<body>
	<!-- 登录注册通用页面顶部 -->
	<div class="common_title">
		<img th:src="@{/images/普惠logo最终版.png}" alt="" class="logo2">
		<span class="common_txt">欢迎注册</span>
	</div>
	<div class="commonbody">
		<div class="common_box common_bg">
			<div class="login_box">
				<input type="text" class="inputbox user" placeholder="手机号" id = "login_user" maxlength="11"/>
				<span class = "ret_prompt user_pos"></span>
				<input type="password" class="inputbox password" placeholder="登录密码" id = "login_pwd" maxlength="16"/>
				<span class = "ret_prompt pass_pos">以字母开头，长度在6-16之间，只能包含字符、数字和下划线</span>
				<div style="position: relative;"><input type="text" class="inputbox yzm" placeholder="输入验证码" id = "verify_codeval"/><span class="get_yzm realNameCode img_pointer" id = "get_smscode_id">获取验证码</span></input></div>
				<span class = "ret_prompt conmonp"></span>
				<input type="button" class="inputbox btn img_pointer" value="注册" style="font-size: 18px;" onclick="registerSubmit()" id = "register_submitid">
				<div class="login_box_bottom"> 
					<span class="login_box_bottom_txt">已经有账号？<a th:href="@{/member/loadlogin}" class="login_box_bottom_link_1">现在去登录</a></span>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<!-- token -->
		<input type="hidden" id="user_token"/>
	</div>
	<!-- 登录注册通用页面顶部 -->
	<!-- 页面底部 -->
	<div th:include="footer::footer"></div>
</body>
<script type="text/javascript">
	var tipsIndex;
	$(function() {
		bingClosetipsIndex();
		resetTetx();
	});
	//重置文本框
	function resetTetx(){
		$('#login_user').val('');
		$('#login_pwd').val('');
	}
	//处理得到焦点后去掉提示
	function bingClosetipsIndex() {
		$('#login_user').on("focus", function() {
			closePtompt();
		});
		$('#login_pwd').on("focus", function() {
			closePtompt();
		});
		$('#verify_codeval').on("focus", function() {
			closePtompt();
		});
	}
	function closePtompt(){
		if (tipsIndex) {
			layer.close(tipsIndex);
		}
		if(isVerifyFlag){
 			operPrompt("");
		}
	}
	//非空验证
	function isNotNull(id) {
		var val = $('#' + id).val();
		if (val.trim().length < 1) {
			tipsIndex = layer.tips("此处不能为空", "#" + id, {
				tips : 2
			});
			return false;
		}
		return true;
	};
	//注册提交
	function registerSubmit() {
		if (isNotNull("login_user")) {
			checkTel("login_user",2);
		}
	}
	// 注册最终提交
	function regsub() {
		var requesturl = "/member/registersubmit";
		$.ajax({
			url : requesturl,
			type : "post",
			dataType : "json",
			data : {
				"accountNumber" : $('#login_user').val(),
				"password" : $('#login_pwd').val(),
				"token" : $("#user_token").val()
			},
			error : function() {
				layer.msg("系统繁忙，请稍后再试！");
				$('#register_submitid').attr("disable", false);
			},
			success : function(data) {
				$('#register_submitid').attr("disable", false);
				if (data.code == "200") {
					window.location.href = "/member/loadRegisterPrompt";
				} else {
					$('.conmonp').html(data.message);
					$('#verify_codeval').val('');
				}
			}
		});
	}
	//获取短信验证码
	var validCode = true;
	$(".realNameCode").click (function  () {
		callvalidCode();
	})
	function callvalidCode() {
		var time = 30;
		var code = $(".realNameCode");
		if (validCode) {
			validCode = false;
			if(!isNotNull("login_user")){
				validCode = true;
				return;
			}
			var flag = checkTel("login_user",0);
			if(!flag){
				validCode = true;
				return;
			}
			if(!pwdRuleVerify()){
				validCode = true;
				return;
			}
			$.ajax({
				url : "/member/sendSmsCode",
				type : "post",
				dataType : "json",
				data : {
					"phone" : $('#login_user').val()
				},
				error : function() {
					layer.msg("系统繁忙，请稍后再试！");
					validCode = true;
				},
				success : function(data) {
					if (data.code == "200") {
						$("#user_token").val(data.token);
						code.addClass("msgs1");
						var t = setInterval(function() {
							time--;
							code.html(time + "秒");
							if (time == 0) {
								clearInterval(t);
								code.html("重新获取");
								validCode = true;
								code.removeClass("msgs1");
							}
						}, 1000)
					} else {
						layer.msg(data.message);
						validCode = true;
					}
				}
			});
		}
	};
	$('#login_user').blur(function(){
		checkTel("login_user",1);
	})
	// 验证手机号
	var isVerifyFlag = false;
	function checkTel(id,type){
		var flag = false;
	    var mobile = $("#"+id).val();
	    if(mobile.trim() == ""){
	    	return flag;
	    }
	    var isMob=/^1(3|4|5|7|8)\d{9}$/;
	    if (isMob.test(mobile)){
	    	$('#login_user').on("focus",function(){
		    	closePtompt();
	    	});
	    	$.ajax({
	    		url:"/member/checkPhone",
	    		type:"post",
	    		dataType:"json",
	    		async:false,
	    		data:{
	    			"phone":$("#login_user").val()
	    		},
	    		success : function(data){
	    			if(data.code == "200"){
						operPrompt("账号已存在");
					}else{
						operPrompt("");
						if(type == 2){
							if(isNotNull("login_pwd") && pwdRuleVerify() && isNotNull("verify_codeval")){
								submitOn();
							}
						}
						flag = true;
						isVerifyFlag = true;
					}
	    		}
	    	});
	    }else {
	    	$('#login_user').off("focus");
	    	$("#login_user").focus();
	    	operPrompt("手机号格式有误");
	    } 
	    return flag;
	}
	function operPrompt(value){
		$('.conmonp').html(value);
	}
	// 校验短信验证码
	function submitOn(){
		$('#register_submitid').attr("disable", true);
		$.ajax({
			url : "/member/verifySmsCode",
			type : "post",
			dataType : "json",
			data : {
				"phone" : $('#login_user').val(),
				"smsCode" : $('#verify_codeval').val()
			},
			error : function() {
				layer.msg("系统繁忙，请稍后再试！");
				$('#register_submitid').attr("disable", false);
			},
			success : function(data) {
				$('#register_submitid').attr("disable", false);
				if (data.code == "200") {
					regsub();
				} else {
					$('.conmonp').html(data.message);
				}
			}
		});
	}
	$('.password').on("focus",function(){
	    $('.pass_pos').css('display','block');
	})
	$('.password').on("blur",function(){
	    $('.pass_pos').css('display','none');
	})
	// 密码规则校验
	function pwdRuleVerify(){
		var pwdVal = $("#login_pwd").val().trim();
		var reg = /^[a-zA-Z]\w{5,15}$/;
		if(!reg.test(pwdVal)){
			$('.conmonp').html("密码格式错误");
			$('.pass_pos').css('display','block');
			$('#login_pwd').off("focus");
			$(".password").focus();
			return false;
		}
		$('#login_pwd').on("focus",function(){
	    	closePtompt();
    	});
		return true;
	}
</script>
</html>